import { useHistory } from "dva";
import React, { useState } from "react";

import { Card, Tabs, Form, Input, Button, message } from "antd";
import Style from "./login.module.scss"
import login from "../../api"


export default () => {
  const history = useHistory()

  // const [loginParams,setLoginParams]=useState({
  // name:"admin",
  // password:"1"
  // })


  const loginClick = async (values) => {
    let params = new URLSearchParams();
    params.append("name", values.username);
    params.append("password", values.password);
    login(params).then(res => {
      if (res.code === 1) {
        message.success(res.msg);
        localStorage.setItem("name", values.username)
        history.push("/Info");
      } else {
        message.error(res.msg)
      }
    })

  }

  return (
    <div className={Style.login}>
      <Card className={Style.card} style={{ borderRadius: 50 }}>
        <h1 className={Style.h1c}>music后台管理</h1>
        <Form onFinish={loginClick} >
          <Form.Item
            label="用户名"
            name="username"
            rules={[{ required: true, message: '请输入用户名' }]}
            style={{ fontWeight: 700 }}
          >
            <Input suffix />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入密码 ' }]}
            style={{ fontWeight: 700, marginLeft: 15 }}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 3, span: 8 }} className={Style.btbox}>
            <Button type="primary" htmlType="submit" className={Style.bt}>
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}